<template>
  <div class="data-card" v-if="isNotDataEmpty">
    <!-- <div class="data-card__panel"> -->
    <div class="data-card__item" v-for="(item, index) in items" :key="index">
      <div class="label">{{ item.label }}</div>
      <div class="value">
        <span v-if="item.symbol">{{ item.symbol }}</span>
        <span>
          {{
            item.formatter
              ? item.formatter(data) || 0
              : getValueByPath(data, item.value) || 0
          }}
        </span>
        <span v-if="item.unit" class="unit">{{ item.unit }}</span>
      </div>
    </div>
    <!-- </div> -->
    <Tips :tips="tips" v-if="tips.length" />
    <!-- <div v-if="SubMchVisible">
      <el-checkbox v-model="containSubMch">本级和下级代理商数据</el-checkbox>
    </div> -->
    <!-- <div class="data-card-tips__wrapper" v-if="tips.length > 0">
      <img
        src="@/assets/images/helpIcon.png"
        alt=""
        class="help-icon"
        @click="handleClose"
      />
      <div v-if="visible" class="data-card_tips">
        <div class="data-card_tips_header">
          说明
          <i
            @click="handleClose"
            class="data-card_tips_header_close el-icon-close"
          >
          </i>
        </div>
        <div class="data-card_tips_body">
          <div
            class="data-card_tips__div"
            v-for="(item, index) in tips"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { getValueByPath } from '@/utils'
import Tips from './Tips'
const whiteList = ['ADMIN', 'SELF_OPERATION_ADMIN']
export default {
  name: 'DataCard',
  components: { Tips },
  data() {
    return {
      visible: false,
      containSubMch: true,
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    items: {
      type: Array,
      required: true,
      default: () => [],
    },
    tips: {
      type: Array,
      default: () => [],
    },
    SubMch: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    roleType() {
      return this.$store.getters.roleType
    },
    SubMchVisible() {
      return this.SubMch && !whiteList.includes(this.roleType)
    },
    isNotDataEmpty() {
      return !this.isDataEmpty()
    },
  },
  watch: {
    containSubMch(val) {
      this.$emit('handleChange', val)
    },
  },
  methods: {
    isDataEmpty() {
      return JSON.stringify(this.$props.data) === '{}'
    },
    handleClose() {
      this.visible = !this.visible
    },
    getValueByPath,
  },
}
</script>
<style lang="scss" scoped>
.data-card {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 41px;
  justify-content: flex-start;
}
// .data-card__panel {
//   display: flex;
//   flex-wrap: wrap;
.data-card__item:nth-child(6n + 1) {
  background-image: url(../../../assets/images/card_blue.png);
}
.data-card__item:nth-child(6n + 2) {
  background-image: url(../../../assets/images/card_red.png);
}
.data-card__item:nth-child(6n + 3) {
  background-image: url(../../../assets/images/card_green.png);
}
.data-card__item:nth-child(6n + 4) {
  background-image: url(../../../assets/images/card_yellow.png);
}
.data-card__item:nth-child(6n + 5) {
  background-image: url(../../../assets/images/card_purple.png);
}
.data-card__item:nth-child(6n) {
  background-image: url(../../../assets/images/card_fuchsia.png);
}
// }
.data-card__item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 242px;
  min-height: 102px;
  padding: 14px;
  margin-right: 20px;
  color: #fff;
  .label {
    font-size: 18px;
  }
  .value {
    font-size: 24px;
    font-weight: bold;
  }
  .unit {
    font-size: 18px;
    font-weight: normal;
  }
}
</style>
